<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好，大学</title>
    <link rel="stylesheet" href="css/login.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <div class="form-box">
        <!-- 注册 -->
        <div class="register-box hidden">
            <h1>register</h1>
            <input type="text" placeholder="用户名">
            <input type="email" placeholder="邮箱">
            <input type="password" placeholder="密码">
            <input type="password" placeholder="确认密码">
            <button>注册</button>
        </div>
        <!-- 登录 -->
        <div class="login-box">
            <h1>login</h1>
            <input id="loginUser" type="text" placeholder="用户名">
            <input id="loginPwd" type="password" placeholder="密码">
            <button type="submit" id="loginBtn" onclick="tryLogin()">登录</button>
        </div>
    </div>
    <div class="con-box left">
        <h2>你好<span>大学</span></h2>
        <p>带你走进<span>大学</span>校园</p>
        <img src="images/1.png" alt="">
        <p>已有账号</p>
        <button id="login">去登录</button>
    </div>
    <div class="con-box right">
        <h2>你好<span>大学</span></h2>
        <p>欢迎来到<span>大学</span>校园</p>
        <img src="images/2.png" alt="">
        <p>没有账号？</p>
        <button id="register">去注册</button>
    </div>
</div>
<script>
    // 要操作到的元素
    let login = document.getElementById('login');
    let register = document.getElementById('register');
    let form_box = document.getElementsByClassName('form-box')[0];
    let register_box = document.getElementsByClassName('register-box')[0];
    let login_box = document.getElementsByClassName('login-box')[0];
    // 去注册按钮点击事件
    register.addEventListener('click', () => {
        form_box.style.transform = 'translateX(80%)';
        login_box.classList.add('hidden');
        register_box.classList.remove('hidden');
    })
    // 去登录按钮点击事件
    login.addEventListener('click', () => {
        form_box.style.transform = 'translateX(0%)';
        register_box.classList.add('hidden');
        login_box.classList.remove('hidden');
    })

    //登录按钮点击事件
    function tryLogin() {
        let user = $('#loginUser').val();
        let pwd = $('#loginPwd').val();
        if(user==='') {
            alert('请输入用户名');
            return;
        } else if(pwd==='') {
            alert('请输入密码');
            return;
        }
        let search = {};
        search['userName'] = user;
        search['pwd'] = pwd;
        $.ajax({
            url: 'http://localhost:8080/login',
            type: 'post',
            dataType: 'text',
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(search),
            success: function (data) {
                if (data === '成功') {
                    window.location.href = "http://localhost:8080/index";
                } else {
                    alert(data);
                }
            }
        })
    }
</script>
</body>
</html>